<template>
  <div class="index">
    <!-- 轮播图 -->
    <div class="baren">
      <el-carousel :interval="5000" arrow="always" height="500px">
        <el-carousel-item v-for="item in imagebox" :key="item.id">
          <img :src="api + item.shuffl_image" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 推荐好书 -->
    <div class="goodbook">
      <div class="goodbook_up">
        <div class="goodbook_up_left">
          <span>推荐好书</span>
        </div>
        <div class="goodbook_up_right">
          <router-link :to="{ name: 'category' }">更多></router-link>
        </div>
      </div>
      <div class="goodbook_down">
        <div
          class="goodbook_down_item"
          v-for="item in booksdata"
          :key="item.id"
        >
          <router-link :to="'/details/' + item.id">
            <div class="goodbook_down_item_0">
              <div class="goodbook_down_item_1">
                <img :src="api + item.image" alt="" />
              </div>
              <div class="goodbook_down_item_2">
                <span>{{ item.bookname }}</span>
              </div>
              <div class="price">
                <p>￥{{ item.vipprice }}</p>
                <p>￥{{ item.price }}</p>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <!-- 热销图书  -->
    <div class="goodbook">
      <div class="goodbook_up">
        <div class="goodbook_up_left">
          <span>热销图书</span>
        </div>
        <div class="goodbook_up_right">
          <router-link :to="{ name: 'category' }">更多></router-link>
        </div>
      </div>
      <div class="goodbook_down">
        <div
          class="goodbook_down_item"
          v-for="item in sellbooksdata"
          :key="item.id"
        >
          <router-link :to="'/details/' + item.id">
            <div class="goodbook_down_item_0">
              <div class="goodbook_down_item_1">
                <img :src="api + item.image" alt="" />
              </div>
              <div class="goodbook_down_item_2">
                <span>{{ item.bookname }}</span>
              </div>
              <div class="price">
                <p>￥{{ item.vipprice }}</p>
                <p>￥{{ item.price }}</p>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imagebox: [],
      booksdata: [],
      sellbooksdata: [],
      api: this.imageapi
    };
  },
  mounted() {
    this.init();
    this.sellinit();
    this.shuffleinit();
    if (location.href.indexOf("#reloadedindex") == -1) {
      location.href = location.href + "#reloadedindex";
      location.reload();
    }
  },
  methods: {
    // 首页展示图书
    init() {
      const that = this;
      that.$http
        .get("/showbooks")
        .then(res => {
          // console.log(res);
          that.booksdata = res.data;
        })
        .catch(function() {});
    },
    //热销图书
    sellinit() {
      const that = this;
      that.$http
        .get("/showsellbooks")
        .then(res => {
          // console.log(res);
          that.sellbooksdata = res.data;
        })
        .catch(function() {});
    },
    //首页展示轮播图
    shuffleinit() {
      this.$http.get("/indexshowshuffling").then(res => {
        // console.log(res);
        this.imagebox = res.data;
      });
    }
  }
};
</script>

<style scoped>
.index {
  width: 100%;
}
/* 轮播图 */
.baren img {
  width: 100%;
  height: 100%;
}
/* 好书推荐 */
.goodbook,
.senitbook {
  width: 1200px;
  margin: 0 auto;
}
.goodbook .goodbook_up,
.senitbook .goodbook_up {
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #2b57a2;
  border-bottom: 2px solid #dfe2e9;
}
.goodbook .goodbook_up .goodbook_up_left span,
.senitbook .goodbook_up .goodbook_up_left span {
  font-size: 28px;
  font-weight: 600;
}
.goodbook .goodbook_up .goodbook_up_right a,
.senitbook .goodbook_up .goodbook_up_right a {
  color: #2b57a2;
  text-decoration: none;
}
.goodbook .goodbook_up .goodbook_up_right a:active,
.goodbook .goodbook_up .goodbook_up_right a:hover,
.senitbook .goodbook_up .goodbook_up_right a:active,
.senitbook .goodbook_up .goodbook_up_right a:hover {
  color: #929db0;
}
.goodbook .goodbook_down {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin: 10px 0;
}
.goodbook .goodbook_down .goodbook_down_item {
  width: 19%;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 0.5%;
}
.goodbook_down_item_0 {
  width: 96%;
  margin: 2%;
}
.goodbook
  .goodbook_down
  .goodbook_down_item
  .goodbook_down_item_0
  .goodbook_down_item_1 {
  width: 100%;
  height: 250px;
}
.goodbook
  .goodbook_down
  .goodbook_down_item
  .goodbook_down_item_0
  .goodbook_down_item_1
  img {
  width: 90%;
  height: 90%;
  margin: 5%;
  transition: all 0.6s;
}
.goodbook
  .goodbook_down
  .goodbook_down_item
  .goodbook_down_item_0
  .goodbook_down_item_1
  img:hover {
  width: 90%;
  height: 90%;
  margin: 5%;
  transform: scale(1.06);
}
.goodbook
  .goodbook_down
  .goodbook_down_item
  .goodbook_down_item_0
  .goodbook_down_item_2 {
  width: 90%;
  height: 40px;
  font-size: 15px;
  line-height: 1.5;
  color: #303133;
  text-align: left;
  padding: 5px 10px;
  overflow: hidden; /*超出隐藏*/
}
.goodbook
  .goodbook_down
  .goodbook_down_item
  .goodbook_down_item_0
  .goodbook_down_item_2:hover {
  color: #005eff;
}
.price {
  height: 40px;
  text-align: left;
}
.price p {
  display: inline;
}
.price p:nth-child(1) {
  font-size: 20px;
  color: #f40;
}
.price p:nth-child(2) {
  font-size: 17px;
  color: #606266;
  text-decoration: line-through;
  margin-left: 5px;
}

/* 人气书籍 */
</style>